<template>
  <ElDialog v-model="dialogVisible" title="选择扩展" :width="1000" align-center>
    <!-- 搜索栏 -->
    <CustomSearchBar
      v-model="searchForm"
      :form-items="searchFormList"
      @search="handleSearch"
      @reset="resetSearchParams"
    ></CustomSearchBar>
    <!-- 表格 -->
    <ArtTable
      :loading="loading"
      :data="data"
      :columns="columns"
      :pagination="pagination"
      empty-height="330px"
      :max-height="500"
      @pagination:size-change="handleSizeChange"
      @pagination:current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <template #content="{ row }"><div v-html="row.content"></div></template>
    </ArtTable>
    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="dialogVisible = false">取消</ElButton>
        <ElButton type="primary" @click="submit">提交</ElButton>
      </div>
    </template>
  </ElDialog>
</template>
<script setup lang="ts">
  import { apiBindSubjectExt, apiSearchSubjectExt } from '@/api/subject'
  import { SearchFormItem } from '@/components/core/forms/art-search-bar/index.vue'
  import { CustomFormEmits } from '@/components/custom/custom-form/it'
  import { useTable } from '@/composables/useTable'
  import { tagType } from '@/maps'
  import { ElMessage, ElTag } from 'element-plus'

  const props = withDefaults(
    defineProps<{
      //显示状态
      visible: boolean
      //不包含的id集合
      noIds: number[] | undefined
      //题目id
      subjectId: number
    }>(),
    {
      visible: false,
      noIds: () => []
    }
  )

  const emit = defineEmits<CustomFormEmits>()

  // 对话框显示控制
  const dialogVisible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
  })

  //选择的id集合
  const selectIds = ref<number[]>()

  // 搜索表单
  const searchForm = ref({
    type: undefined,
    title: undefined,
    noIds: undefined
  })

  //搜索提交数据
  const searchData = ref({
    type: '',
    title: '',
    noIds: ''
  })

  //搜索表单项
  const searchFormList: SearchFormItem[] = [
    {
      label: '类型',
      key: 'type',
      type: 'select',
      props: {
        placeholder: '请选择类型',
        options: [
          {
            label: '背景知识',
            value: '1'
          },
          {
            label: '翻译技巧',
            value: '2'
          },
          {
            label: '重点词汇',
            value: '3'
          }
        ],
        clearable: true
      }
    },
    {
      label: '名称',
      key: 'title',
      type: 'input',
      clearable: true
    }
  ]

  const apiSearch = (params: any) => {
    console.log(params)
    params['noIds'] = ''
    if (Array.isArray(props.noIds)) {
      params['noIds'] = props.noIds.join(',')
    }
    return apiSearchSubjectExt(params)
  }

  const {
    columns,
    data,
    loading,
    pagination,
    getData,
    searchParams,
    resetSearchParams,
    handleSizeChange,
    handleCurrentChange
  } = useTable({
    // 核心配置
    core: {
      apiFn: apiSearch,
      immediate: false,
      apiParams: {
        current: 1,
        size: 10,
        ...searchForm.value
      },
      columnsFactory: () => [
        { type: 'selection', width: 60, label: '选择', align: 'center' }, // 序号
        { prop: 'id', width: 60, label: 'id', align: 'center' }, // 序号
        {
          prop: 'type',
          label: '类型',
          width: 100,
          align: 'center',
          formatter: (row: any) => {
            return h(ElTag, { type: tagType[row.type] }, () => row.typeName)
          }
        },
        {
          prop: 'title',
          label: '名称',
          align: 'center',
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'content',
          label: '内容',
          useSlot: true
        },
        {
          prop: 'addTime',
          label: '创建日期',
          align: 'center',
          width: 180
        }
      ]
    }
  })

  //搜索
  const handleSearch = (params: any) => {
    searchData.value.type = params.type
    searchData.value.title = params.title
    // 搜索参数赋值
    Object.assign(searchParams, searchData.value)
    getData()
  }

  //处理勾选事件
  const handleSelectionChange = (rows: any) => {
    selectIds.value = rows.map((item: any) => item.id)
  }

  //提交数据
  const submit = () => {
    if (!Array.isArray(selectIds.value)) {
      return
    }
    if (selectIds.value.length == 0) {
      ElMessage.error('请选择扩展')
      return
    }

    apiBindSubjectExt(props.subjectId, selectIds.value.join(',')).then((res) => {
      if (res) {
        ElMessage.success('绑定成功')
        dialogVisible.value = false
        emit('submit', {})
      }
    })
  }

  watch(
    () => props.visible,
    (newValue) => {
      if (newValue) {
        getData()
      }
    }
  )
</script>
